<template>
    <div id="zxYeji">
        <div class="heightChart">
            <div class="title">来电记录</div>
            <div id="main2"></div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import {phoneCount} from "../../../network/home";

    export default {
        name: "zxYeji",
        data() {
            return {
                timer:null
            }
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            }, 30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('右下关闭')
            }
        },
        methods: {
            setEchart() {
                phoneCount().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data)
                        let myChart = echarts.init(document.getElementById("main2"));
                        var myColor = [
                            '#2EC0F9',
                            '#FF9302',
                            '#87C500',
                            '#007DF3',
                            '#FFC020',
                        ]
                        myChart.setOption({
                            grid: {
                                top: '15%',
                                right: '3%',
                                left: '8%',
                                bottom: '12%'
                            },
                            xAxis: [{
                                type: 'category',
                                // data: ['接听数', '咨询数', '派单数 ', '到场数','完成数', '接收数', '到场数', '处理数'],
                                data: res.data.name,
                                axisLabel: {
                                    margin: 20,
                                    color: '#ffffff',
                                    textStyle: {
                                        fontSize: 12
                                    },
                                },
                            }],
                            yAxis: [{
                                axisLabel: {
                                    color: '#ffffff',
                                },
                                axisLine: {
                                    show: false
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: '#272456'
                                    }
                                }
                            }],
                            series: [{
                                type: 'line',
                                // data: [150, 250, 400, 350,150, 250, 400, 350],
                                data: res.data.value,
                                barWidth: '40px',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true, //开启显示
                                            position: 'top', //在上方显示
                                            textStyle: { //数值样式
                                                color: 'white',
                                                fontSize: 12
                                            },
                                        },
                                        // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        //     offset: 0,
                                        //     color: '#5DB1F9' // 0% 处的颜色
                                        // }, {
                                        //     offset: 1,
                                        //     color: '#0260BD' // 100% 处的颜色
                                        // }], false),
                                        color: function (params) {
                                            var num = myColor.length;
                                            return myColor[params.dataIndex]
                                        },
                                        shadowBlur: 4,
                                    }
                                },

                            }]
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 610px;
        height: 340px;
        background: url("../../../assets/img/worktake/bottom.png");
        background-size: 610px 340px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 22px;
        color: #6AFF8B;
    }


    #main2 {
        width: 100%;
        height: 300px;
        box-sizing: border-box;
        padding-top: 50px;
    }
</style>
